import { Avatar, Button, Comment, Form, Input, List,Tooltip } from 'antd';
import { DislikeFilled, DislikeOutlined, LikeFilled, LikeOutlined } from '@ant-design/icons';
import moment from 'moment';
import React, { createElement,useState } from 'react';
import Actions from './actions';
import Dianzan from './dianzan';
import { UserOutlined } from '@ant-design/icons';
import axios from 'axios'
const { TextArea } = Input;
let list1=[];
let list3=[];
let time=[];

var store = window.localStorage

let k=0;
// const CommentList = ({ comments }) => (
//   <List
//     dataSource={comments}
//     itemLayout="horizontal"
//     renderItem={(props) => ( 
//    <List>

//   <Comment  {...props} />
//  <Actions/>
  
//   </List>
//     )
//   }
//   />
// );
const Editor = ({ onChange, onSubmit, submitting, value }) => (
  <>
    <Form.Item>
      <TextArea rows={4} onChange={onChange} value={value} />
    </Form.Item>
    <Form.Item>
      <Button htmlType="submit" loading={submitting} onClick={onSubmit} type="primary">
        添加评论
      </Button>
    </Form.Item>
  </>
);
const  Edit = () => { 
  const request = axios.create({
    baseURL: "http://localhost:8080",
  });
  let author=["zhang","wang","li"]
  
const [comments, setComments] = useState([]);
const [submitting, setSubmitting] = useState(false);
const [value, setValue] = useState('');

const handleSubmit = () => {
  var user_name = store.getItem("UserName")
  var course_name = store.getItem("ClassPage")
  var comment_data = {
    "course": course_name,
    "username": user_name,
    "content": value,
  }
  console.log(comment_data)
  request.post('/api/addComment', comment_data).then(
    res => {
      alert('评论成功')
      window.location.reload()
    }
  )
 
if (!value) return;
setSubmitting(true);
setTimeout(() => {
  k++;
  

  setSubmitting(false);
  setValue('');
  setComments([
    ...comments,
    { avatar: <Avatar style={{ backgroundColor: '#87d068' }}  icon={<UserOutlined />} /> ,
      author: <p>{author[k%3]}</p>,
      content: <p>{value}</p>,
      datetime: moment().format('YYYY-MM-DD HH:mm:ss')
    },
  ]

  );
}, 1000);



};
  const handleChange = (e) => {
    setValue(e.target.value);
    
  };
  return (
    <> 
      {comments.length > 0}

      <Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
      <Comment
       
       
        content={
          <Editor
            onChange={handleChange}
            onSubmit={handleSubmit}
            submitting={submitting}
            value={value}
          />
        }
      />
    </>
  );
};
export default Edit;